import type { FormSchema } from '@/components/Form';

import { h } from 'vue';

import { useForm } from '@/components/Form';
import { getMobilePlatformEnumSchema } from '@/enums/mobile/mobilePlatformEnum';
import { useI18n } from '@/hooks/web/useI18n';
import { Select } from 'ant-design-vue';

const { t } = useI18n();

const schemas: FormSchema[] = [
  {
    field: 'Icon',
    helpMessage: `${t('common.field')}：${'Icon'}`,
    // component: 'IconPicker',
    label: t('mobile.route.app.iconText'),
    slot: 'icon',
    colProps: {
      // span: 24,
      xs: 24, // <576px
      sm: 24, // ≥576px
      md: 24, // ≥768px
      lg: 24, // ≥992px
      xl: 24, // ≥1200px
      xxl: 24, // ≥1600px
      // xxxl: 24, // ≥2000px 3.0
    },
  },
  {
    field: 'Id',
    helpMessage: `${t('common.field')}：${'Id'}`,
    component: 'Input',
    label: t('entity.idTitle'),
    componentProps: { disabled: true },
    colProps: {
      // span: 12,
      xs: 24, // <576px
      sm: 24, // ≥576px
      md: 24, // ≥768px
      lg: 24, // ≥992px
      xl: 12, // ≥1200px
      xxl: 12, // ≥1600px
      // xxxl: 12, // ≥2000px 3.0
    },
  },
  {
    field: 'Code',
    helpMessage: `${t('common.field')}：${'Code'}`,
    component: 'Input',
    label: t('mobile.route.app.codeText'),
    required: true,
    colProps: {
      // span: 12,
      xs: 24, // <576px
      sm: 24, // ≥576px
      md: 24, // ≥768px
      lg: 24, // ≥992px
      xl: 12, // ≥1200px
      xxl: 12, // ≥1600px
      // xxxl: 12, // ≥2000px 3.0
    },
  },
  {
    field: 'Platform',
    helpMessage: `${t('common.field')}：${'Platform'}`,
    component: 'Input',
    label: t('mobile.route.app.platformText'),
    required: true,
    render: ({ model, field }) => {
      return h(Select, {
        options: [...getMobilePlatformEnumSchema()],
        showSearch: true,
        optionFilterProp: 'label',
        value: model[field],
        onChange: (e: any) => {
          model[field] = e;
        },
      });
    },
    colProps: {
      // span: 12,
      xs: 24, // <576px
      sm: 24, // ≥576px
      md: 24, // ≥768px
      lg: 24, // ≥992px
      xl: 12, // ≥1200px
      xxl: 12, // ≥1600px
      // xxxl: 12, // ≥2000px 3.0
    },
  },
  {
    field: 'IsLocked',
    helpMessage: `${t('common.field')}：${'IsLocked'}`,
    component: 'Switch',
    label: t('entity.lockable.isLockedTitle'),
    colProps: {
      // span: 12,
      xs: 24, // <576px
      sm: 24, // ≥576px
      md: 24, // ≥768px
      lg: 24, // ≥992px
      xl: 12, // ≥1200px
      xxl: 12, // ≥1600px
      // xxxl: 12, // ≥2000px 3.0
    },
  },
  {
    field: 'Name',
    helpMessage: `${t('common.field')}：${'Name'}`,
    component: 'Input',
    label: t('mobile.route.app.nameText'),
    required: true,
    colProps: {
      // span: 12,
      xs: 24, // <576px
      sm: 24, // ≥576px
      md: 24, // ≥768px
      lg: 24, // ≥992px
      xl: 12, // ≥1200px
      xxl: 12, // ≥1600px
      // xxxl: 12, // ≥2000px 3.0
    },
  },
  {
    field: 'Description',
    helpMessage: `${t('common.field')}：${'Description'}`,
    component: 'Input',
    label: t('mobile.route.app.descriptionText'),
    colProps: {
      // span: 12,
      xs: 24, // <576px
      sm: 24, // ≥576px
      md: 24, // ≥768px
      lg: 24, // ≥992px
      xl: 12, // ≥1200px
      xxl: 12, // ≥1600px
      // xxxl: 12, // ≥2000px 3.0
    },
  },
  {
    field: 'Author',
    helpMessage: `${t('common.field')}：${'Author'}`,
    component: 'Input',
    label: t('mobile.route.authorText'),
    colProps: {
      // span: 12,
      xs: 24, // <576px
      sm: 24, // ≥576px
      md: 24, // ≥768px
      lg: 24, // ≥992px
      xl: 12, // ≥1200px
      xxl: 12, // ≥1600px
      // xxxl: 12, // ≥2000px 3.0
    },
  },
  {
    field: 'Email',
    helpMessage: `${t('common.field')}：${'Email'}`,
    component: 'Input',
    label: t('mobile.route.emailText'),
    colProps: {
      // span: 12,
      xs: 24, // <576px
      sm: 24, // ≥576px
      md: 24, // ≥768px
      lg: 24, // ≥992px
      xl: 12, // ≥1200px
      xxl: 12, // ≥1600px
      // xxxl: 12, // ≥2000px 3.0
    },
  },
  {
    field: 'PhoneNumber',
    helpMessage: `${t('common.field')}：${'PhoneNumber'}`,
    component: 'Input',
    label: t('mobile.route.phoneNumberText'),
    colProps: {
      // span: 12,
      xs: 24, // <576px
      sm: 24, // ≥576px
      md: 24, // ≥768px
      lg: 24, // ≥992px
      xl: 12, // ≥1200px
      xxl: 12, // ≥1600px
      // xxxl: 12, // ≥2000px 3.0
    },
  },
  {
    field: 'AppStoreLink',
    helpMessage: `${t('common.field')}：${'AppStoreLink'}`,
    component: 'Switch',
    label: t('mobile.route.app.appStoreLinkText'),
    colProps: {
      // span: 12,
      xs: 24, // <576px
      sm: 24, // ≥576px
      md: 24, // ≥768px
      lg: 24, // ≥992px
      xl: 12, // ≥1200px
      xxl: 12, // ≥1600px
      // xxxl: 12, // ≥2000px 3.0
    },
  },
  {
    field: 'Url',
    helpMessage: `${t('common.field')}：${'Url'}`,
    component: 'Input',
    label: t('mobile.route.app.urlText'),
    colProps: {
      // span: 24,
      xs: 24, // <576px
      sm: 24, // ≥576px
      md: 24, // ≥768px
      lg: 24, // ≥992px
      xl: 24, // ≥1200px
      xxl: 24, // ≥1600px
      // xxxl: 24, // ≥2000px 3.0
    },
  },
  {
    field: 'CreatedTime',
    helpMessage: `${t('common.field')}：${'CreatedTime'}`,
    component: 'DatePicker',
    label: t('entity.creationAudited.createdTimeTitle'),
    componentProps: {
      disabled: true,
      showTime: true,
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      style: { width: '100%' },
    },
    colProps: {
      // span: 12,
      xs: 24, // <576px
      sm: 24, // ≥576px
      md: 24, // ≥768px
      lg: 24, // ≥992px
      xl: 12, // ≥1200px
      xxl: 12, // ≥1600px
      // xxxl: 12, // ≥2000px 3.0
    },
  },
  {
    field: 'UpdatedTime',
    helpMessage: `${t('common.field')}：${'UpdatedTime'}`,
    component: 'DatePicker',
    label: t('entity.updateAudited.updatedTimeTitle'),
    componentProps: {
      disabled: true,
      showTime: true,
      valueFormat: 'YYYY-MM-DD HH:mm:ss',
      style: { width: '100%' },
    },
    colProps: {
      // span: 12,
      xs: 24, // <576px
      sm: 24, // ≥576px
      md: 24, // ≥768px
      lg: 24, // ≥992px
      xl: 12, // ≥1200px
      xxl: 12, // ≥1600px
      // xxxl: 12, // ≥2000px 3.0
    },
  },
];

// 头部
export const [registerForm, { resetFields, getFieldsValue, setFieldsValue, validate }] = useForm({
  labelWidth: 160,
  schemas,
  showActionButtonGroup: false,
  compact: true,
});
